<template>
  <div class="sidebar">
    <el-menu :default-active="$route.path" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
      :collapse="isCollapse" background-color="#060c2b" text-color="#fff" active-text-color="#02B8FF" router
      :unique-opened="true">
      <div class="logo" unique-opened>
        <h3 v-if="!isCollapse">{{ systemName }}</h3>
        <h3 v-else><el-image style="width: 40px; height: 40px;" :src="logoImg" alt="logo"
            fit="cover"></el-image></h3>
      </div>
      <!-- 大屏，可隐藏 -->
      <el-menu-item @click="openCockpitPage">
        <i class="el-icon-data-line"></i>
        <span slot="title">数据大屏</span>
      </el-menu-item>
      <common-menu-item-aside :menuItemData="menuData"></common-menu-item-aside>
    </el-menu>
  </div>
</template>

<script>
import { SYSTEM_NAME } from "@/common/constant/Const";
import CommonMenuItemAside from "./CommonMenuItemAside.vue";
import { mapState } from 'vuex';
import logoImg from '@/assets/logo.png'
export default {
  name: "CommonMenuAside",
  components: {
    CommonMenuItemAside,
  },
  data() {
    return {
      systemName: SYSTEM_NAME,
      logoImg: logoImg,
    };
  },
  methods: {
    handleOpen(key, keyPath) {
      // console.log(this.$route);
      // console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      // console.log(this.$route);
      // console.log(key, keyPath);
    },
    openCockpitPage() {
      window.open('/#/cockpit', '_blank');
    },
  },
  computed: {
    //没有子菜单
    noChildren() {
      return this.menuData.filter((item) => !item.children);
    },
    //有子菜单
    hasChildren() {
      return this.menuData.filter((item) => item.children);
    },
    isCollapse() {
      return this.$store.state.tab.isCollapse;
    },
    // ...mapState({
    //   menuData: state => state.menuList || []
    // }),
    menuData() {
      // return this.$store.state.tab.menuList &&
      //   this.$store.state.tab.menuList.length > 0
      //   ? this.$store.state.tab.menuList
      //   : JSON.parse(window.sessionStorage.getItem("menuList"));
      return this.$store.state.tab.menuList;
    }
  },
  mounted() {
    const storedMenuList = JSON.parse(window.sessionStorage.getItem("menuList"));
    if (storedMenuList) {
      this.$store.dispatch('updateMenuList', storedMenuList);
    }
  }
};
</script>

<style lang="less" scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 202px;
  min-height: 400px;
}

.el-menu {
  height: calc(100vh - 2px);
  // width: 200px;
  border-right: none;
}

.logo {
  height: 60px;
  background-color: #060c2b;
  display: flex;
  justify-content: center;
  align-items: center;

  h3 {
    color: #fff;
    text-align: center;
    // line-height: 24px;
    font-size: 16px;
    font-weight: 400;
  }
}

.sidebar::v-deep {
  scrollbar-width: none;
  height: 100%;
  // border: 1px solid;
  box-sizing: border-box;
  border-image: linear-gradient(180deg,
      rgba(116, 190, 243, 0.5),
      rgba(0, 180, 255, 1)) 1 1;
  overflow: scroll;

  >.el-menu {
    border: none;

    >.el-menu-item:nth-child(1)::before {
      display: none !important;
    }
  }

  .is-active {
    position: relative;
    box-sizing: border-box;
    border: 1px solid;
    border-image: linear-gradient(84deg,
        rgba(29, 35, 126, 0),
        rgba(42, 104, 207, 1),
        rgba(5, 172, 255, 1),
        rgba(30, 88, 199, 1),
        rgba(21, 49, 97, 0)) 1 1;

    >div>span {
      color: #409eff !important;
    }
  }

  .el-submenu.is-active {
    border: none;
  }
}
</style>
